<template>
  <el-dialog title="编辑年级" :visible.sync="isEditGrade" width="30%" :before-close="handleClose" :close-on-click-modal='false'>
    <el-form ref="form" label-width="80px" size="small">
      <el-form-item label="年级名称">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="对应K12">
        <el-input v-model="k_twelve" disabled></el-input>
      </el-form-item>
      <p class="distributionPrompt">k12是北美小学和中学教育的简称。从小学到高中毕业的缩写</p>
      <simple-table v-if="row.type === 1" :tableConfig="tableConfig" :tableData="tableData"></simple-table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="checkFn()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import simpleTable from '@/components/simpleTable.vue'
import {APIEDITGRADE} from '@/common/api.js'
export default {
  components: {
    simpleTable
  },
  props: ['isEditGrade', 'row'],
  data () {
    return {
      name: '',
      k_twelve: '',
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        border: true,
        config: [
          {id: 'phase', name: '阶段'},
          {id: 'grade', name: '年级'},
          {id: 'age', name: '年龄'}
        ]
      },
      tableData: [
        {
          phase: '小学',
          grade: '1-6年级（或1-5）',
          age: '6-12岁'
        },
        {
          phase: '中学（初中）',
          grade: '7-9年级（或6-8）',
          age: '13-15岁'
        },
        {
          phase: '中学（高中）',
          grade: '10-12年级',
          age: '16-18岁'
        }
      ]
    }
  },
  created () {
    this.name = this.row.title
    this.k_twelve = this.row.k_twelve
  },
  methods: {
    handleClose () {
      this.$emit('noEditGrade')
    },
    close (type) {
      this.$emit('noEditGrade', type)
    },
    checkFn () {
      if (this.name === '') {
        this.$message.warning('年级名称不能为空')
        return false
      }
      this.submit()
    },
    submit () { // 提交
      APIEDITGRADE({
        grade_id: this.row.id,
        grade_title: this.name
      }).then((res) => {
        if (res.status === 1) {
          this.$message.success(res.msg)
          this.close(1)
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
